<template>
  <div class="footer_nav">
    <van-tabbar
      class="footer-bar"
      v-model="active"
      :route="true"
      safe-area-inset-bottom
    >
      <!-- <van-tabbar-item
        name="Home"
        replace
        @click="toggleIcon('home')"
        :icon="data.homeIcon"
        to="/home"
        >{{ $t("common.lang_home") }}</van-tabbar-item
      > -->
      <van-tabbar-item to="/home" name="Home" replace>
        <template #icon="props" >
          <img :src="props.active ? homeIcon.active : homeIcon.inactive" />
        </template>
        <span>{{ $t("common.lang_home") }}</span>
      </van-tabbar-item>
      <!-- <van-tabbar-item
        name="Classify"
        replace
        :icon="data.classifyIcon"
        @click="toggleIcon('classify')"
        to="/classify"
        >{{ $t("common.lang_classify") }}</van-tabbar-item
      > -->
      <van-tabbar-item to="/classify" name="Classify" replace>
        <template #icon="props" >
          <img :src="props.active ? classifyIcon.active : classifyIcon.inactive" />
        </template>
        <span>{{ $t("common.lang_classify") }}</span>
      </van-tabbar-item>
      <!-- <van-tabbar-item
        name="Shop"
        replace
        :icon="data.shopIcon"
        @click="toggleIcon('shop')"
        to="/shop"
        :dot="data.dot"
        :badge="goodsNum"
        >{{ $t("common.lang_shop") }}</van-tabbar-item
      > -->
      <van-tabbar-item to="/shop" :badge="goodsNum" name="Shop" replace>
        <template #icon="props" >
          <img :src="props.active ? shopIcon.active : shopIcon.inactive" />
        </template>
        <span>{{ $t("common.lang_shop") }}</span>
      </van-tabbar-item>
      <!-- <van-tabbar-item
        name="My"
        replace
        :icon="data.myIcon"
        @click="toggleIcon('my')"
        to="/my"
        >{{ $t("common.lang_my") }}</van-tabbar-item
      > -->
      <van-tabbar-item to="/my" name="My" replace>
        <template #icon="props" >
          <img :src="props.active ? myIcon.active : myIcon.inactive" />
        </template>
        <span>{{ $t("common.lang_my") }}</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script name="footerNav">
import {
  icon1,
  icon1_clicked,
  icon2,
  icon2_clicked,
  icon3,
  icon3_clicked,
  icon4,
  icon4_clicked,
} from "/src/assets/source/index.vue";

const { useCommon } = $globalStore;

let data = reactive({
  footerActive: "Home",
  dot: false,
});

const goodsNum = computed(() => {
  return useCommon?.goods_card_num;
});

export default {
  setup() {
    const active = ref(0);
    const homeIcon = {
      active: icon1_clicked,
      inactive:icon1,
    };
    const classifyIcon = {
      active: icon2_clicked,
      inactive:icon2,
    };
    const shopIcon = {
      active: icon3_clicked,
      inactive:icon3,
    };
    const myIcon = {
      active: icon4_clicked,
      inactive:icon4,
    };
    return {
      homeIcon,
      classifyIcon,
      shopIcon,
      myIcon,
      active,
      data,
      goodsNum,
    };
  },
};
</script>
<style lang="less" scoped>
.footer_nav {
  height: 50px;
  .footer-bar {
    position: absolute;
    bottom: 0;
  }
}
</style>
